//@ts-nocheck
/** 我们有时可能想改变ref里存的数据时也更新视图,但默认是不会的
 * 我们可以比较hack的实现forceUpdate来更新视图*/


import React, { useState, useRef, useReducer} from 'react';
import ReactDOM from 'react-dom';


function App(props: any) {
  const nRef = React.useRef(0);

  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1500);

  const [ignored/*state*/, forceUpdate/*dispatch*/] = useReducer(x => x + 1/*reducer*/, 0);

  return (
    <div className='App'>
      <p>{nRef.current}</p>

      <button onClick={() => {
        nRef.current += 1;
        console.log('ignored:',ignored);
        forceUpdate(ignored);
      }}>+1
      </button>
      <button onClick={log}>log</button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
